<template>
  <div id="search-bar">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入你想要的商品"
      @search="onSearch"
      @cancel="onCancel"
      background="#eee"
    />
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import 'vant/lib/search/style'
Vue.use(Search);

export default {
  name:"SearchBar",
  data() {
    return {
      value:""
    }
  },
  methods:{
    onSearch(){
      this.$http({
        url:"/api/public/v1/goods/search",
        methods:"get",
        params:{
          query:this.value
        }
      }).then(res => {
        // console.log(res)
        this.$emit("getSearchList",res.data.message.goods)
      }).catch(err => {
        // console.log(err)
      })
      var arrStr = localStorage.getItem('historyData');
      var arr = JSON.parse(arrStr);
      arr.push(this.value);
      arr = [...new Set(arr)];
      localStorage.setItem('historyData',JSON.stringify(arr))
      this.$emit('historyChange',this.value)
      this.value = ""
    },
    onCancel(){

    }
  }
}
</script>

<style scoped>

</style>